<template>
  <div>
    <div class="local-name">
      设备列表
      <el-button
        size="small"
        class="add-button"
        type="success"
        v-if="userGuardList.includes(guard.DeviceManage)"
        @click="showUpload"
      >
        <svg-icon icon-class="add"></svg-icon> 批量导入
      </el-button>
      <el-button
        size="small"
        class="add-button"
        type="success"
        v-if="userGuardList.includes(guard.DeviceManage)"
        @click="showAdd"
        @refresh="search"
      >
        <svg-icon icon-class="add"></svg-icon> 新建
      </el-button>
      <el-button
        size="small"
        icon="el-icon-delete"
        style="margin-right: 0; background-color: #f24d1f;float: right; color: #fff"
        class="add-button"
        v-if="userGuardList.includes(guard.DeviceManage)"
        @click="deleteSelect"
      >删除所选</el-button>
    </div>
    <div class="search-form-container">
      <el-form
        inline="true"
        :model="searchForm"
      >
        <!-- <el-input
            v-model="searchForm.factoryUuid"
            placeholder="请输入工厂名称"
          ></el-input> -->
        <el-select
          size="small"
          clearable
          v-model="searchForm.factoryUuid"
          filterable
          remote
          reserve-keyword
          placeholder="工厂名称"
          :remote-method="remoteFactoryListSearch"
          :loading="remoteLoading"
        >
          <el-option
            v-for="factory in factoryList"
            :key="factory.uuid"
            :label="factory.name"
            :value="factory.uuid"
          >
          </el-option>
        </el-select>
        <!-- <el-input
            v-model="searchForm.typeUuid"
            placeholder="请输入设备类型"
          ></el-input> -->
        <el-select
          size="small"
          v-model="searchForm.typeUuid"
          filterable
          remote
          reserve-keyword
          placeholder="设备类型"
          :remote-method="remoteDeviceTypeSearch"
          :loading="remoteLoading"
          clearable
        >
          <el-option
            v-for="deviceType in deviceTypeList"
            :key="deviceType.uuid"
            :label="deviceType.name"
            :value="deviceType.uuid"
          ></el-option>
        </el-select>
        <el-input
          size="small"
          clearable
          v-model="searchForm.serialNumber"
          placeholder="序列号"
        ></el-input>
        <el-input
          size="small"
          clearable
          v-model="searchForm.name"
          placeholder="设备名称"
        ></el-input>
        <el-select
          size="small"
          v-model="searchForm.status"
          placeholder="设备状态"
          clearable
        >
          <el-option
            v-for="item in optionStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- <el-input v-model="searchForm.active"></el-input> -->
        <el-select
          size="small"
          clearable
          v-model="searchForm.active"
          placeholder="是否可用"
        >
          <el-option
            v-for="item in activeOptionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          :loading="searchForm.btnLoading"
        >查询</el-button>
      </el-form>
      <upload
        ref="uploadComponent"
        @refresh="search"
      ></upload>
    </div>
  </div>

</template>

<script>
import Upload from './upload';
import { generateSelectorData } from './service';
import { queryDeviceTypeListApi } from '../../../api/deviceType';
import { Message } from 'element-ui';
import { parseError } from '../../../utils';
import { queryFactoryListApi } from '../../../api/factory';
export default {
  components: {
    Upload
  },
  model: {
    prop: 'searchForm'
  },
  props: {
    searchForm: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      remoteLoading: false,
      factoryList: [],
      optionStatus: [],
      deviceTypeList: [],
      activeOptionList: [
        {
          label: '可用',
          value: true
        },
        {
          label: '不可用',
          value: false
        }
      ]
    };
  },
  created() {
    this.optionStatus = generateSelectorData();
    this.remoteDeviceTypeSearch();
    this.remoteFactoryListSearch();
  },
  methods: {
    deleteSelect() {
      this.$emit('deleteSelectedDevice');
    },
    search() {
      this.$emit('search');
    },
    showAdd() {
      this.$router.push('/device/add/');
    },
    showUpload() {
      this.$refs.uploadComponent.showDialog();
    },
    remoteDeviceTypeSearch(query) {
      this.remoteLoading = true;
      queryDeviceTypeListApi(query, 10)
        .then(deviceTypeList => (this.deviceTypeList = deviceTypeList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteFactoryListSearch(query) {
      this.remoteLoading = true;
      queryFactoryListApi(query, 10)
        .then(factoryList => (this.factoryList = factoryList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  .local-name {
    padding: 10px 0 10px 10px;
    font-size: 24px;
    font-weight: 800;
    .add-button {
    }
    .el-button--success {
      float: right;
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-right: 10px;
    }
  }
  .search-form-container {
    background-color: #fff;
    padding: 10px 10px 0 10px;
    margin: 0 10px 0 10px;
    .el-select {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .search-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-button--primary {
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-bottom: 10px;
    }
  }
}
</style>
